<template>
  <div>
    <div class="basic-info">项目进度&项目成本使用度</div>
    <!-- 环形图 -->
    <!-- <a-space :size="10">
      <div id="charts-process-one" style="width: 500px; height: 600px"></div>
      <div id="charts-process-two" style="width: 500px; height: 600px"></div>
    </a-space> -->

    <a-row :gutter="20">
      <a-col class="gutter-row" :span="10">
        <div class="gutter-box">
          <div id="charts-process-one" style="width: 100%; height: 400px"></div>
          <p>计划周期 150天</p>
          <p>计划成本 20000元</p>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="11">
        <div class="gutter-box">
          <div id="charts-process-two" style="width: 100%; height: 400px"></div>
          <p>实际周期 100天</p>
          <p>实际已使用成本 10000元</p>
        </div>
      </a-col>
    </a-row>
    <a-divider />

    <div class="basic-info">项目进度&项目成本使用度</div>
    <!-- 折线图 -->
    <div class="time-choose">
      <a-space :size="10">
        <div>显示维度：</div>
        <a-button type="primary" :ghost="activeBtn == 1" @click="chooseBtn(1)">
          日
        </a-button>
        <a-button type="primary" :ghost="activeBtn == 2" @click="chooseBtn(2)">
          月
        </a-button>
        <a-button type="primary" :ghost="activeBtn == 3" @click="chooseBtn(3)">
          季度
        </a-button>
      </a-space>
    </div>
    <div id="charts-process" style="width: 70%; height: 400px"></div>
  </div>
</template>

<script>
var echarts = require("echarts");
const colors = ["#56ADF0", "#D29CFF"];
export default {
  data() {
    return {
      activeBtn: 1,
    };
  },
  methods: {
    chooseBtn(e) {
      this.activeBtn = e;
    },
    createSeccondChart() {
      var myChart = echarts.init(document.getElementById("charts-process"));
      var option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "200px",
          top: "100px",
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
            magicType: {
              type: ["line", "bar"],
            },
          },
        },
        legend: {
          data: ["降水量", "平均温度"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "降水量",
            min: 0,
            max: 250,
            position: "right",
            offset: 20,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "温度",
            min: 0,
            max: 25,
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "降水量",
            type: "line",
            yAxisIndex: 0,
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "平均温度",
            type: "bar",
            yAxisIndex: 1,
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    createFristChart() {
      var myChart = echarts.init(document.getElementById("charts-process-one"));

      var img =
        "";
      var trafficWay = [
        {
          name: "未完成",
          value: 1212,
        },
        {
          name: "已完成",
          value: 5137,
        },
      ];

      var data = [];
      var color = ["#F1F1F1", "#56ADF0"];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 15,
                shadowBlur: 10,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }

      console.log(data);
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              borderRadius: ["100%", "100%"],
              label: {
                show: true,
                position: "outside",
                color: "#333333",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      "项目进度：" +
                      params.name +
                      "\n" +
                      "\n" +
                      "占百分比：" +
                      percent +
                      "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 100,
                show: true,
                color: "#333333",
              },
            },
          },
          data: data,
        },
      ];
      var option = {
        backgroundColor: "#ffffff",
        color: color,
        title: {
          text: "48%\n项目任务进度",
          top: "45%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#3BA0EE",
            fontSize: 20,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 150,
                height: 150,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        // legend: {
        //   icon: "circle",
        //   orient: "horizontal",
        //   // x: 'left',
        //   data: ["正常", "报警", "离线", "故障"],
        //   right: 320,
        //   bottom: 120,
        //   align: "right",
        //   textStyle: {
        //     color: "#333333",
        //   },
        //   itemGap: 20,
        // },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      myChart.setOption(option);
    },
    createSeccondChart2() {
      var myChart1 = echarts.init(
        document.getElementById("charts-process-two")
      );

      var img =
        "";
      var trafficWay = [
        {
          name: "未完成",
          value: 245,
        },
        {
          name: "已完成",
          value: 513,
        },
      ];

      var data = [];
      var color = ["#F1F1F1", "#DFB8FF"];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 15,
                shadowBlur: 10,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }

      console.log(data);
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              borderRadius: ["100%", "100%"],
              label: {
                show: true,
                position: "outside",
                color: "#333333",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      "项目进度：" +
                      params.name +
                      "\n" +
                      "\n" +
                      "占百分比：" +
                      percent +
                      "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 100,
                show: true,
                color: "#333333",
              },
            },
          },
          data: data,
        },
      ];
      var option = {
        backgroundColor: "#ffffff",
        color: color,
        title: {
          text: "50%\n使用度",
          top: "45%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#DFB8FF",
            fontSize: 20,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 150,
                height: 150,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        // legend: {
        //   icon: "circle",
        //   orient: "horizontal",
        //   // x: 'left',
        //   data: ["正常", "报警", "离线", "故障"],
        //   right: 320,
        //   bottom: 120,
        //   align: "right",
        //   textStyle: {
        //     color: "#333333",
        //   },
        //   itemGap: 20,
        // },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      myChart1.setOption(option);
    },
  },
  mounted() {
    this.createSeccondChart();
    this.createFristChart();
    this.createSeccondChart2();
  },
};
</script>
<style lang="less" scoped>
.basic-info {
  color: #333333;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 30px;
}
.time-choose {
  float: right;
  margin-bottom: 100px;
}
.time-choose::after {
  content: "";
  clear: right;
}
.gutter-box {
  text-align: center;
}
</style>